<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约核酸检测</div>
    </div>
    <div class="table">
      <el-form :inline="true" class="tableHeader">
        <el-form-item>
          <el-radio-group v-model="form1.radio" @click="ra">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">已完成</el-radio>
            <el-radio :label="2">待检测</el-radio>
            <el-radio :label="3">已退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setalltable1">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTableRef"
        :data="nowdata"
        style="width: 100%"
        size="large"
      >
        <el-table-column type="selection" />
        <el-table-column property="patients_name" label="患者姓名" />
        <el-table-column property="card_numer" label="就诊卡号" />
        <el-table-column property="patients_id_number" label="身份证号" />
        <el-table-column property="patients_phone" label="手机号码" />
        <el-table-column property="department_one_name" label="科室" />
        <el-table-column property="patients_balance_of" label="检测费" />
        <el-table-column property="patients_status" label="状态">
          <template #default="scope">
            <el-tag
              type="success"
              color="#fff"
              v-if="scope.row.patients_status == 1"
              >已完成</el-tag
            >
            <el-tag color="#fff" v-else-if="scope.row.patients_status == 2"
              >待检测</el-tag
            >
            <el-tag
              type="danger"
              color="#fff"
              v-else-if="scope.row.patients_status == 3"
              >已退款</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column property="patients_ClinicDate" label="就诊日期" />
        <el-table-column property="patients_appointmentTime" label="候诊时间" />
        <el-table-column property="patients_waitingTime" label="预约时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-icon color="#006eff" :size="23" @click="details(scope.row)"
              ><Tickets
            /></el-icon>
            <!-- <button @click="details(scope.row)">详情</button> -->
          </template>
        </el-table-column>
      </el-table>
      <div>
        <page :count="count" @changePage="changePage"></page>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { getall, setalltable } from "../../utils/api/hesuan";
import storege from "../../utils/storege";
import format from "../../utils/formatDay_ssh";
import page from "../../components/yema_ssh/yema.vue";
export default {
  props: {},
  components: {
    page,
  },
  setup() {
    const data = reactive({
      value: null,
      tableData: [],
      count: null,
      page: 1,
      form1: {
        startDate: "",
        endDate: "",
        radio: 0,
      },
    });
    const nowdata = computed(() => {
      let qishi = (data.page - 1) * 5;

      return data.tableData.slice(qishi, qishi + 5);
    });
    const router = useRouter();
    const details = (value) => {
      storege.setStorage("row", value);
      router.push({
        name: "BookingDetails",
      });
    };
    const getall1 = () => {
      getall().then((res) => {
        // console.log(res);
        data.tableData = res.data.data;
        data.count = data.tableData.length;
      });
    };
    getall1();
    const changePage = (page) => {
      console.log(page);
      data.page = page;
    };
    const changeDate = () => {
      console.log(data.value);
      if (data.value == null) {
        data.form1.startDate = null;
        data.form1.endDate = null;
      } else {
        data.form1.startDate = format(data.value[0]);
        data.form1.endDate = format(data.value[1]);
      }
    };
    changeDate();
    const sele = () => {
      setalltable(data.form1).then((res) => {
        console.log(res);
        data.tableData = res.data.data;
        data.count = data.tableData.length;
      });
    };
    const setalltable1 = () => {
      sele();
    };
    const ra = () => {
      sele();
    };
    return {
      ...toRefs(data),
      details,
      changePage,
      nowdata,
      setalltable1,
      changeDate,
      ra,
      sele,
    };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.table {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  .tableHeader {
    margin-bottom: 20px;
  }
  .tableFooter {
    border: 1px solid red;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
</style>